<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <div class="Mall4j page-member-center">
    <!-- 头部 -->
    <MemberHeader />
    <!-- /头部 -->
    <div class="my-integral">
      <div class="my-img">
        <img
          v-if="userPic"
          :src="checkFileUrl(userPic)"
          alt
          @error="userPic=''"
        >
        <img
          v-if="!userPic"
          src="@/assets/images/buyer-img.png"
          alt
        >
      </div>
      <div class="item current">
        <div class="number">
          {{ scoreInfo.score }}
        </div>
        <div class="text">
          {{ $t('myPoints.currentPoints') }}
        </div>
      </div>
      <div class="item">
        <div class="number">
          {{ scoreInfo.expireScore }}
        </div>
        <div class="text">
          {{ $t('myPoints.expiredPoints') }}
        </div>
      </div>
      <router-link
        to="/user-center/uc-integral"
        class="record"
      >
        <span class="icon" />
        <span class="text">{{ $t('memberCenter.viewPointsDetails') }}</span>
        <span class="arr">&gt;&gt;</span>
      </router-link>
    </div>
    <div class="content">
      <!-- 兑换列表 -->
      <div class="exchange-list">
        <div class="goods-list integral-list">
          <div class="list-con">
            <div
              v-for="item in scoreList"
              :key="item.prodId"
              class="item"
              @click="toScoreProdDet(item.prodId,item.scorePrice)"
            >
              <div class="goods-img">
                <ImgShow :src="item.pic" />
              </div>
              <div class="goods-msg">
                <div class="goods-name">
                  {{ item.prodName }}
                </div>
                <div class="goods-price">
                  <div class="icon">
                    <img
                      src="@/assets/images/member-pic/integral-icon.png"
                      alt
                    >
                  </div>
                  <div class="integral-price">
                    {{ item.scorePrice }} {{ $t('memberCenter.points') }}
                  </div>
                  <div
                    v-if="item.price > 0"
                    class="add"
                  >
                    +
                  </div>
                  <div
                    v-if="item.price > 0"
                    class="price"
                  >
                    ￥{{ item.price }}
                  </div>
                </div>
                <div class="old-price">
                  {{ $t('memberCenter.marketPrice') }}￥{{ item.oriPrice }}
                </div>
              </div>
            </div>
          </div>
          <!-- 商品列表为空 -->
          <empty
            v-if="isEmpty"
            :text="$t('sorryNoRelatedProducts')"
            :back="$t('lookAtOther')"
            :back-path="'/list'"
          />
          <!-- 商品列表为空 -->
        </div>
      </div>
      <!-- /兑换列表 -->
      <!-- 页码 -->
      <pagination
        v-model="current"
        :pages="pages"
        @change-page="getScroeList()"
      />
      <!-- /页码 -->
    </div>
  </div>
</template>

<script setup>
import { loadTransition } from '@/utils/load-transition'
import Cookie from 'vue-cookies'
import MemberHeader from '@/components/member-header/index.vue'
import Pagination from '@/components/pagination/index.vue'
import Empty from '@/components/empty-all-tips/index.vue'
import { checkFileUrl } from '@/utils/index.js'
loadTransition()
const router = useRouter()
const scoreInfo = ref({}) // 会员信息
const userPic = ref('') // 会员头像
onMounted(() => {
  // 未登录跳转到登录页

  if (!Cookie.get('bbcToken')) {
    router.replace({ path: '/login' })
  }

  // 设置网页标题
  document.title = $t('memberCenter.scoreMall')
  // 积分信息
  http.get('/p/score/scoreInfo').then(({ data }) => {
    scoreInfo.value = data
  })

  // 获取会员头像
  http.get('/p/user/userInfo').then(({ data }) => {
    userPic.value = data.pic
  })

  getScroeList()
})

// 获取积分商品列表
const pages = ref(1) // 总页数
const scoreList = ref([]) // 积分商品列表
const current = ref(1) // 当前页数
const isEmpty = ref(false)
const getScroeList = () => {
  isEmpty.value = false
  http.get('/search/page', {
    params: {
      current: current.value,
      size: 20,
      prodType: 3,
      sort: 2
    }
  }).then(({ data }) => {
    pages.value = data.pages
    scoreList.value = data.records[0].products
    isEmpty.value = !scoreList.value.length
  })
}
// 跳转到积分商品详情
const toScoreProdDet = (prodId, scoreFee) => {
  const newPage = router.resolve({
    path: '/detail',
    query: {
      prodId,
      scoreFee
    }
  })
  window.open(newPage.href, '_blank', 'noopener,noreferrer')
}

</script>

<style lang="scss" scoped>
@use '../index.scss' as index-mc;
@use './index.scss';
</style>
